import React, {Component} from 'react';
import {
    Image,
    Text,
    View,
    ScrollView,
    StyleSheet,
    findNodeHandle,
    ImageBackground,
    ToolbarAndroid,
    FlatList,
    ViewPagerAndroid,
    Animated,
    TouchableHighlight,
    SwipeableFlatList,
    Dimensions,
    Alert,
    TouchableOpacity,
} from 'react-native';

import Styles from './Styles';
import JsonData from './Jsons';
import Item_List_1 from '../../components/Item_List_1';
import LinearGradient from 'react-native-linear-gradient';
import TabScreen from '../../components/TabScreen';
import RefreshList from '../../documents/code';
import ScrollableTabView, {DefaultTabBar} from 'react-native-scrollable-tab-view';
import FlatList_Tab from '../../components/FlatList_Tab';
import ScrollView_Double from '../../components/ScrollView_Double';
import SwipeRow from '../../components/SwipeRow';

const {width} = Dimensions.get('window');


export default class Page5 extends BaseComponent {
    static navigationOptions = {
        headerTitle: '我的',//对页面的配置
        tabBarLabel: '我的',
        tabBarIcon: ({focused}) => {
            if (focused) {
                return (
                    <Image style={Styles.tabBarIcon} source={require('../../images/people_fill.png')}/>
                );
            }
            return (
                <Image style={Styles.tabBarIcon} source={require('../../images/people.png')}/>
            );
        },
    };

    onActionSelected = (position) => {
        if (position === 0) { // index of 'Settings'
            //showSettings();
            //alert('设置菜单');
        }
        alert('position = ' + position);
    };

    /* 吸顶 */
    initTopBar() {
        const {navigate} = this.props.navigation;
        return (
            <View style={Styles.container}>
                <ToolbarAndroid
                    style={Styles.toolBar}
                    logo={require('../../images/emoji.png')}
                    title="大标题"
                    titleColor={'white'}
                    subtitle={'小标题'}
                    subtitleColor={'pink'}
                    navIcon={require('../../images/cart_fill.png')}//导航器图标，即最左边的图标
                    //overflowIcon={}//这个属性是菜单item多时，省略号的图标
                    actions={[
                        // 至少显示两个，多余的才可以 ifRoom
                        // icon在收起来的menu中是没有图标icon，只有文字title
                        {title: '1', icon: require('../../images/settings.png'), show: 'always',},
                        {title: '2', icon: require('../../images/people.png'), show: 'always',},
                        {title: '3', icon: require('../../images/home.png'), show: 'ifRoom',},
                        {title: '4', icon: require('../../images/message.png'), show: 'ifRoom',},
                        {title: '5', icon: require('../../images/scan.png'), show: 'ifRoom',},
                    ]}
                    onIconClicked={this.onActionSelected}   //导航器图标被选中时的操作，一般用于返回主页
                    onActionSelected={this.onActionSelected}
                />

                <ScrollView
                    contentContainerStyle={Styles.contentContainer}
                    onScroll={this._onScroll}
                    stickyHeaderIndices={[1]} /* 数值决定由第几个子控件吸顶 */
                    showsVerticalScrollIndicator={false}
                >
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 100, backgroundColor: 'red'}}>
                        <Text ref='text1'>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: 'green'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#pink'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                    <View style={{width: Config.deviceWidth, height: 200, backgroundColor: '#c8c8c8'}}>
                        <Text>我的界面</Text>
                    </View>
                </ScrollView>

            </View>
        );
    }

    /* ScrollableTabView */
    initScrollableTabView() {
        return (
            <ScrollableTabView
                ref={'scrollBody'}
                style={{marginTop: 20, height: 800}}
                initialPage={1}
                tabBarActiveTextColor={'#d72a39'}
                tabBarUnderlineStyle={{backgroundColor: '#d72a39'}}
                renderTabBar={() => <DefaultTabBar/>}
            >

                <ScrollView
                    tabLabel="音乐" style={styles.tabView}
                    onScroll={(event) => {
                        let offsetY = event.nativeEvent.contentOffset.y; //滑动距离
                        if (offsetY <= 0) {
                            this.setNativeProps({
                                scrollEnabled: true
                            });
                        }
                    }}

                >
                    <View style={styles.card}>
                        <Text>Musics</Text>
                    </View>
                </ScrollView>

                <ScrollView tabLabel="视频" style={styles.tabView}>
                    <View style={styles.card}>
                        <Text>Friends</Text>
                    </View>
                </ScrollView>

                <ScrollView tabLabel="电台" style={styles.tabView}>
                    <View style={styles.card}>
                        <Text>Messenger</Text>
                    </View>
                </ScrollView>

            </ScrollableTabView>
        );
    }

    constructor(props) {
        super(props);
        this.state = {
            goodsData: [
                {title: '标题一', subtitle: '周末五折起', isShow: true},
                {title: '标题二', subtitle: '限时抢购', isShow: true},
                {title: '标题三', subtitle: '大降价', isShow: true},
                {title: '标题四', subtitle: '品质好物', isShow: true},
                {title: '标题五', subtitle: '新东西', isShow: true},
                {title: '标题六', subtitle: '新东西', isShow: true},
                {title: '标题七', subtitle: '新东西', isShow: true},
            ],
            data: [
                {name: '第1', age: 1},
                {name: '第2', age: 2},
                {name: '第3', age: 3},
                {name: '第4', age: 4},
                {name: '第5', age: 5},
                {name: '第6', age: 6},
                {name: '第7', age: 7},
                {name: '第8', age: 8},
                {name: '第9', age: 9},
                {name: '第10', age: 10},
            ],
        };
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <ScrollView_Double/>
                {/*<SwipeRow style={{marginTop: 100}}>
                    <TouchableOpacity
                        style={styles.delTextContainer}
                        onPress={() => {
                            alert('ss');
                        }}
                    >
                        <Text
                            style={styles.deleteTextStyle}
                        >删除</Text>
                    </TouchableOpacity>
                    <View style={[styles.content, {transform: [{translateX: -100}]}]}>
                        <Text>我是item的内容</Text>
                    </View>
                </SwipeRow>*/}
            </View>
        );
    }


    extraUniqueKey(item, index) {
        return "index" + index + item;
    }

    //填充Item Cell
    renderItemView({item}) {
        let imageUrl = item.squareimgurl.replace('w.h', '160.0').replace('http', 'https');
        return (
            <View style={styles.container}>
                <Image source={{uri: imageUrl}} style={styles.icon}/>

                <View style={styles.rightContainer}>
                    <Text>{item.mname}</Text>
                    <View>
                    </View>
                    <Text style={styles.p} numberOfLines={0}>{item.title}</Text>
                    <View style={{flex: 1, justifyContent: 'flex-end'}}>
                        <Text>{item.price}元</Text>
                    </View>
                </View>
            </View>
        );
    }


    //绘制侧滑视图
    renderQuickActions({item}) {
        return (
            <View style={styles.actionsContainer}>
                <TouchableHighlight
                    style={styles.actionButton}
                    onPress={() => {

                        Alert.alert(
                            'Tips',
                            'You could do something with this edit action!',
                        );
                    }}>
                    <Text style={styles.actionButtonText}>编辑</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    style={[styles.actionButton, styles.actionButtonDestructive]}
                    onPress={() => {
                        Alert.alert(
                            '删除' + item.mname,
                            item.title,
                        );
                    }}>
                    <Text style={styles.actionButtonText}>删除</Text>
                </TouchableHighlight>
            </View>
        );
    }


}
let styles = StyleSheet.create({
    linearGradient: {
        flex: 1,
        paddingLeft: 15,
        paddingRight: 15,
        borderRadius: 5
    },
    buttonText: {
        fontSize: 18,
        fontFamily: 'Gill Sans',
        textAlign: 'center',
        margin: 10,
        color: '#ffffff',
        backgroundColor: 'transparent',
    },
    tabView: {
        flex: 1,
        padding: 10,
        backgroundColor: 'rgba(0,0,0,0.01)',
    },
    card: {
        borderWidth: 1,
        backgroundColor: '#fff',
        borderColor: 'rgba(0,0,0,0.1)',
        margin: 5,
        height: 500,
        padding: 15,
        shadowColor: '#ccc',
        shadowOffset: {width: 2, height: 2,},
        shadowOpacity: 0.5,
        shadowRadius: 3,
    },
    item: {
        backgroundColor: '#aeffb1',
        height: 100,
        marginRight: 15,
        marginLeft: 15,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 5,//漂浮的效果
        borderRadius: 5,//圆角
    },
    text: {
        color: '#444444',
        fontSize: 20,
    },
    //侧滑菜单的样式
    quickAContent: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        marginRight: 15,
        marginBottom: 10,
    },
    quick: {
        backgroundColor: "#ff1d49",
        flex: 1,
        alignItems: 'flex-end',//水平靠右
        justifyContent: 'center',//上下居中
        width: 100,
        borderRadius: 5,
        elevation: 5,//漂浮的效果

    },
    delete: {
        color: "#d8fffa",
        marginRight: 30
    },

    flex: {
        flex: 1,
        width: width,
        backgroundColor: 'white'
    },
    icon: {
        width: 80,
        height: 80,
        borderRadius: 5,
    },
    rightContainer: {
        flex: 1,
        paddingLeft: 20,
        paddingRight: 10,
    },
    h1: {
        fontSize: 15,
        fontWeight: 'bold',
        color: '#222222',
    },
    p: {
        fontSize: 13,
        color: '#777777',
        marginTop: 8,
    },
    actionsContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
    },
    actionButton: {
        padding: 10,
        width: 80,
        justifyContent: 'center',
        backgroundColor: '#999999',
    },
    actionButtonDestructive: {
        backgroundColor: '#FF0000',
    },
    actionButtonText: {
        textAlign: 'center',
    },

    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        width: '100%',
    },
    delTextContainer: {
        width: 100,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center'
    },
    deleteTextStyle: {
        color: '#fff',
    },
    content: {
        width: '100%',
        height: 100,
        backgroundColor: 'yellow',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

























